<template>
    <div class="question-list">
        <el-button type="success" class="button" plain @click="handleAdd">新建聊天</el-button>

        <button class="question-item" v-for="(q, qi) in questionList" :key="q.id" :class="[curQIndex == qi ? 'choose' : '']"
            @click="qChange(qi)">
            {{ q.title }}
        </button>

    </div>
</template>

<script>


export default {
    data() {
        return {
            questionList: [
                {
                    id: 1,
                    title: 'vue2生命周期'
                },
                {
                    id: 2,
                    title: 'vue3生命周期'
                }
            ],
            curQIndex: 0
        }
    },
    methods: {
        qChange(index) {
          this.curQIndex = index
        },
        handleAdd() {
            this.questionList.unshift({
                id: this.questionList.length + 1,
                title: '新问题'
            })
        }
    },
    mounted() {
    }

}

</script>

<style scoped lang="scss">
.question-list {
    width: 100%;
    height: 100%;
}

.button {
    width: 100%;
    margin-bottom: 20px;
    border: 1px dashed;
}

.question-item {
    margin-bottom: 10px;
    width: 100%;
    line-height: 40px;
    text-align: center;
    border: 1px solid #909399;
    border-radius: 5px;
    background: #fff;
    cursor: pointer;
}

.choose {
    border: 1px solid #67C23A;
    color: #67C23A;
}
</style>